<template>
  <view class="container">
    <view class="header">
      <text class="title">添加进度记录</text>
      <text class="subtitle">记录生活目标的完成情况</text>
    </view>
    
    <Card class="form-card">
      <view class="form-group">
        <text class="label">记录日期</text>
        <picker mode="date" :value="record.date" @change="onDateChange">
          <view class="picker">
            {{ record.date || '请选择日期' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">完成状态</text>
        <radio-group @change="onStatusChange" class="radio-group">
          <label class="radio">
            <radio value="未完成" :checked="record.status === '未完成'" />
            <text class="radio-text">未完成</text>
          </label>
          <label class="radio">
            <radio value="进行中" :checked="record.status === '进行中'" />
            <text class="radio-text">进行中</text>
          </label>
          <label class="radio">
            <radio value="已完成" :checked="record.status === '已完成'" />
            <text class="radio-text">已完成</text>
          </label>
        </radio-group>
      </view>
      
      <view class="form-group">
        <text class="label">记录内容</text>
        <textarea 
          v-model="record.content" 
          placeholder="请输入记录内容" 
          class="textarea"
          auto-height
        />
      </view>
      
      <Button 
        class="submit-btn" 
        type="primary" 
        @click="submitRecord"
        :disabled="!record.date || !record.status"
      >
        提交记录
      </Button>
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    // 获取当前日期并格式化为 YYYY-MM-DD 格式
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;
    
    return {
      record: {
        date: formattedDate,
        status: '',
        content: ''
      }
    };
  },
  
  methods: {
    onDateChange(e) {
      this.record.date = e.detail.value;
    },
    
    onStatusChange(e) {
      this.record.status = e.detail.value;
    },
    
    submitRecord() {
      // 验证输入
      if (!this.record.date) {
        uni.showToast({
          title: '请选择记录日期',
          icon: 'none'
        });
        return;
      }
      
      if (!this.record.status) {
        uni.showToast({
          title: '请选择完成状态',
          icon: 'none'
        });
        return;
      }
      
      // 提交记录逻辑
      uni.showToast({
        title: '记录添加成功',
        icon: 'success'
      });
      
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
}

.title {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.form-card {
  padding: $spacing-lg;
}

.form-group {
  margin-bottom: $spacing-lg;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.picker {
  padding: $spacing-sm;
  border: 1px solid $text-tertiary;
  border-radius: $border-radius-sm;
  color: $text-secondary;
}

.radio-group {
  display: flex;
  flex-direction: row;
}

.radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: $spacing-lg;
}

.radio-text {
  margin-left: $spacing-xs;
  font-size: $font-size-base;
  color: $text-primary;
}

.textarea {
  width: 100%;
  padding: $spacing-sm;
  border: 1px solid $text-tertiary;
  border-radius: $border-radius-sm;
  font-size: $font-size-base;
  color: $text-primary;
  box-sizing: border-box;
}

.submit-btn {
  margin-top: $spacing-xl;
  width: inherit;
}
</style>